<template>
  <Layout class-prefix="layout">
    <Tags/>
    <Notes field-name="备注" placeholder="请输入备注"/>
    <Types/>
    <Calculator @commitRecord="commitRecord"/>
  </Layout>
</template>
<script lang="ts">
import Tags from '@/components/money/Tags.vue';
import Notes from '@/components/money/Notes.vue';
import Types from '@/components/money/Types.vue';
import Calculator from '@/components/money/Calculator.vue';
import {Component, Vue, Watch} from 'vue-property-decorator';

@Component({
  components: {Calculator, Types, Notes, Tags},
  computed: {
    tagsList() {
      return this.$store.state.tagsList;
    },

    recordList() {
      return this.$store.state.recordList;
    },

    record() {
      return this.$store.state.record;
    }
  }
})
export default class Money extends Vue {

  commitRecord() {
    const tempRecord: RecordItem = this.cloneRecord(this.$store.state.record);
    this.$store.commit('addRecord', tempRecord);
    alert('添加成功');
    this.$store.commit('cleanRecord');
  }

  cloneRecord(data: RecordItem) {
    return JSON.parse(JSON.stringify(data));
  }

  @Watch('recordList')
  onRecordChanged() {
    this.$store.commit('saveRecordList');
  }
}
</script>

<style lang="scss">

.layout-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
</style>

<style lang="scss" scoped>

</style>